<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>vanxkr - 主页</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <style type="text/css">
    /* copyright stuffs.. */
    .flex {
      display: flex;
    }
    .flex.grow--auto {
        flex-grow: auto;
    }
    .flex.grow--1 {
        flex-grow: 1;
    }
    .flex.grow--2 {
        flex-grow: 2;
    }
    .flex.grow--3 {
        flex-grow: 3;
    }
    .flex.flow--wrap {
        flex-flow: wrap;
    }
    .flex.flow--nowrap {
        flex-flow: nowrap;
    }
    .flex.flow--row {
        flex-flow: row;
    }
    .flex.flow--column {
        flex-flow: column;
    }
    .flex.flow--row-reverse {
        flex-flow: row-reverse;
    }
    .flex.flow--wrap-reverse {
        flex-flow: wrap-reverse;
    }
    .flex.dir--row {
        flex-direction: row;
    }
    .flex.dir--row-reverse {
        flex-direction: row-reverse;
    }
    .flex.dir--column {
        flex-direction: column;
    }
    .flex.dir--column-reverse {
        flex-direction: column-reverse;
    }
    .flex.ai--flex-start {
        align-items: flex-start;
    }
    .flex.ai--flex-end {
        align-items: flex-end;
    }
    .flex.ai--center {
        align-items: center;
    }
    .flex.ai--baseline {
        align-items: baseline;
    }
    .flex.ai--stretch {
        align-items: stretch;
    }
    .flex.jc--flex-start {
        justify-content: flex-start;
    }
    .flex.jc--flex-end {
        justify-content: flex-end;
    }
    .flex.jc--center {
        justify-content: center;
    }
    .flex.jc--baseline {
        justify-content: baseline;
    }
    .flex.jc--space-between {
        justify-content: space-between;
    }
    .flex.jc--space-around {
        justify-content: space-around;
    }
    .flex.jc--space-evenly {
        justify-content: space-evenly;
    }
    .flex.jc--stretch {
        justify-content: stretch;
    }
    /////////////////////////////////////////////////////////
    p {
      text-align: center;
      color: #55acee;
      padding-top: 20px;
    }
    body {
      font-family: nsimsum;
      padding: 20px;
      margin: 0;
      text-align: center;
    }
    body::before {
      width: 120%;
      height: 10px;
      position: fixed;
      top: -10px;
      left: -10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    }
    #main {
      float: left;
    }
    /* start da css for da buttons */
    .btn {
      border-radius: 4px;
      padding: 0px 20px;
      font-size: 17px;
      text-decoration: none;
      margin: 20px;
      color: #fff;
      display: inline-block;
      min-height: 40px;
      max-height: 40px;
      line-height: 40px;
      box-sizing: border-box;
      background-color: #ccc;
      box-shadow: 0px 5px 0px 0px #aaa;
    }
    .btn:active {
      transform: translate(0px, 5px);
      -webkit-transform: translate(0px, 5px);
      //box-shadow: 0px 1px 0px 0px;
    }
    .blue {
      background-color: #55acee;
      box-shadow: 0px 5px 0px 0px #3c93d5;
    }
    .blue:hover {
      background-color: #6fc6ff;
    }
    .green {
      background-color: #2ecc71;
      box-shadow: 0px 5px 0px 0px #15b358;
    }
    .green:hover {
      background-color: #48e68b;
    }
    .red {
      background-color: #e74c3c;
      box-shadow: 0px 5px 0px 0px #ce3323;
    }
    .red:hover {
      background-color: #ff6656;
    }
    .purple {
      background-color: #9b59b6;
      box-shadow: 0px 5px 0px 0px #82409d;
    }
    .purple:hover {
      background-color: #b573d0;
    }
    .orange {
      background-color: #e67e22;
      box-shadow: 0px 5px 0px 0px #cd6509;
    }
    .orange:hover {
      background-color: #ff983c;
    }
    .yellow {
      background-color: #f1c40f;
      box-shadow: 0px 5px 0px 0px #d8ab00;
    }
    .yellow:hover {
      background-color: #ffde29;
    }
    body {
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed, fixed;
      background-position: center center;
      background-color: #101010;
      overflow: auto;
    }
    .main {
      margin-top: 20px;
      align-items: flex-start;
      height: auto;
    }
    .main aside {
      background: rgba(40, 40, 40, 0.8);
      border-radius: 2px;
      position: sticky;
      top: 20px;
    }
    .main aside .items {
      padding: 12px;
      font-size: 17px;
      color: #555;
      cursor: pointer;
    }
    .main aside .items:hover {
      color: #3f8fff;
    }
    .main section {
      height: auto;
      overflow-y: hidden;
      position: relative;
    }
    .section-root {
      margin: 0 0 20px 20px;
      padding: 10px;
      background: rgba(40, 40, 40, 0.8);
      border-radius: 2px;
    }
    .section-root__title {
      border-bottom: 1px solid #ebebeb;
      height: 50px;
      font-size: 17px;
      color: #6b7386;
      line-height: 50px;
      text-align: left;
      margin-left: 20px;
    }
    .section-root__sub {
      text-align: left;
    }
    .search {
      height: 50px;
      text-align: center;
    }
    .search > input {
      width: 100%;
      height: 50px;
      float: left;
      color: #afafaf;
      font-size: 17px;
      padding-left: 0px;
      color: #15120e;
      border: 0;
      padding: 20px;
      box-sizing: border-box;
      background: rgba(40, 40, 40, 0.8);
    }
    .nav {
      margin: 20px auto;
      background: rgba(40, 40, 40, 0.8);
      border-radius: 2px;
      padding: 20px;
      box-sizing: border-box;
    }
    #nav .btn {
      margin-right: 5px;
      margin-bottom: 5px;
    }
    @media (max-width: 768px) {
      /*超小屏幕设备 手机*/
      body {
        padding: 10px;
      }
      .container {
        width: auto;
        margin: 0 auto;
      }
      .nav {
        width: 100%;
      }
      .main aside {
        width: auto;
      }
      .main section {
        width: auto;
      }
    }
    @media (min-width: 768px) and (max-width: 992px) {
      /*小屏幕设备 平板*/
      .container {
        width: 700px;
        margin: 0 auto;
      }
      .nav {
        width: 700px;
      }
      .main aside {
        width: 100px;
      }
      .main section {
        width: 600px;
      }
    }
    @media (min-width: 992px) and (max-width: 1200px) {
      /*中等屏幕设备 桌面*/
      .container {
        width: 900px;
        margin: 0 auto;
      }
      .nav {
        width: 900px;
      }
      .main aside {
        width: 100px;
      }
      .main section {
        width: 800px;
      }
    }
    @media screen and (min-width: 1200px) {
      /*大屏幕设备 桌面*/
      .container {
        width: 1200px;
        margin: 0 auto;
      }
      .nav {
        width: 1200px;
      }
      .main aside {
        width: 200px;
      }
      .main section {
        width: 1000px;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="search">
      <input type="text" name="keywords" id="keywords" placeholder="在此处输入搜索内容... 回车搜索~" />
    </div>
    <div class="nav flex flow--wrap" id="nav">
      <!-- add here -->
    </div>
    <div class="main flex">
      <aside id="aside" class="flex dir--column"></aside>
      <section id="section">
      </section>
    </div>
  </div>
  <script type="text/javascript">
    // 搜索
    $("#keywords").keydown(function (e) {
      if (13 == e.keyCode) {
        window.open('https://www.baidu.com/s?wd=' + document.getElementById("keywords").value + '&ie=UTF-8&tn=62095104_26_oem_dg', 'blank');
      }
    }); 
  </script>


  <script>
    /**
    * 创建链接的按钮
    *
    * @param {Array} links 链接的数组: [{name: xxx, url: xxx}]
    */
    var classes = ['blue', 'red', 'green', 'orange', 'purple', 'yellow']; // 按钮样式
    function CreateButtons (links, target) {
      for (var i = 0; i < links.length; i++) {
        const ra = classes[Math.round(Math.random() * 5)];
        $('<a class="btn" target="_blank">')
          .attr('href', links[i].url)
          .text(links[i].name)
          .addClass(ra)
          .appendTo(target);
      }
    }
    function CreateButtons2 (links, target) {
      for (var i = 0; i < links.length; i++) {
        const item = links[i];
        const subLinks = item.links;
        var root = document.createElement('div');
        root.className = 'section-root';
        root.id = item.id;

        $(`<div class="section-root__title">${item.name}</div>`).appendTo(root)

        var subRoot = document.createElement('div')
        subRoot.className = 'section-root__sub';
        root.appendChild(subRoot)

        const ra = classes[Math.round(Math.random() * 5)];
        for (let j = 0; j < subLinks.length; j++) {
          const childElement = subLinks[j];
          var a = document.createElement('a')
          subRoot.id = item.id;
          var a = $('<a class="btn" target="_blank">')
            .attr('href', childElement.url)
            .attr('data-links', childElement.url)
            .text(childElement.name).addClass(ra)[0];
          subRoot.appendChild(a);
        }
        target.appendChild(root)
      }
    }
    (function () {
      // 1. 普通链接，页面跳转
      // 2. 有子链接，显示子链接
      $('#section').on('click', '.btn', function (e) {
        var subLinks = JSON.parse($(this).attr('data-links'));
        if (subLinks) {
          e.preventDefault();
          CreateButtons(subLinks);
        }
      });
    })();

    var data_json = {
      'url_main': [
        { name: '博客主页', url: 'http://vanxkr.com' },
        { name: 'gitee', url: 'https://gitee.com/vanxkr/' },
        { name: '百度翻译', url: 'https://fanyi.baidu.com' },
        { name: '娄底天气', url: 'https://weather.com/zh-CN/weather/today/l/36a5d3191eb799fe7d0954ffe6f8dc95b824a12527a32563d1873bbc576da848' },
        { name: 'Qt官方文档', url: 'https://doc.qt.io/qt-5/classes.html' },
        { name: '在线api测试-Getman', url: 'https://getman.cn' },
        { name: '站长工具', url: 'http://tool.chinaz.com' },
        { name: '在线工具', url: 'https://tool.lu' },
        { name: 'OSC在线工具', url: 'http://tool.oschina.net' },
        { name: 'Json格式化', url: 'https://www.json.cn' },
        { name: 'CSS可视化', url: 'https://html-css-js.com/css/generator' },
        { name: '草料二维码', url: 'https://cli.im/deqr' },
        { name: 'Learn Git Game', url: 'https://git.mo.mk' },
        { name: 'Redis在线练习', url: 'http://try.redis.io' },
        { name: '缓动函数速查', url: 'https://easings.net' },
        { name: 'easy PDF', url: 'https://easypdf.com' },
        { name: '数据库在线ER图', url: 'https://app.quickdatabasediagrams.com' },
        { name: '阿里巴巴矢量图标库', url: 'https://www.iconfont.cn' },
        { name: '在线画函数曲线', url: 'https://www.desmos.com/calculator' },
        { name: 'collectui', url: 'https://collectui.com' },
        { name: 'PNG to ICO', url: 'https://convertico.com' },
        { name: 'SQL格式化', url: 'http://tool.oschina.net/codeformat/sql' },
        { name: '在线UML时序图', url: 'https://qtdebug.com/html/seqdiag/' },
        { name: 'ubuntu在线粘贴板', url: 'https://paste.ubuntu.com.cn' },
        { name: '可视化算法', url: 'https://algorithm-visualizer.org' },
        { name: '迅捷PDF转Word(2M内免费)', url: 'https://app.xunjiepdf.com/en/pdf2word/' },
        { name: '文叔叔-在线传文件', url: 'https://www.wenshushu.cn' },
        { name: '编译器汇编', url: 'https://godbolt.org' },
        { name: 'zlibrary', url: 'https://sg1lib.org' },
        { name: '在线工具箱', url: 'http://tool.liumingye.cn/' },
      ],
      'url_fenlei': [

        {
          name: '金融', links: [
            { name: '天天基金', url: 'http://fund.eastmoney.com' },
          ], id: 'jingrong'
        },
        {
          name: '颜色工具箱', links: [
            { name: 'CSS 渐变背景', url: 'https://webgradients.com' },
            { name: '色阶', url: 'https://coolors.co/96bbbb-618985-a8aaa3-f2e3bc-c19875' },
            { name: '颜色码转换工具', url: 'https://www.sioe.cn/yingyong/yanse-rgb-16/' },
            { name: 'WEB 安全色', url: 'http://www.bootcss.com/p/websafecolors/' },
            { name: '调色板', url: 'http://paletton.com/#uid=11I0u0kv-llnqsWt1pMDygZNBby' },
            { name: 'Color Hex Color Codes', url: 'https://www.color-hex.com' },
            { name: 'Color Spaces', url: 'https://www.color-hex.com/color/777777' },
            { name: 'HSL Color Picker', url: 'http://hslpicker.com/#36c94c' },
          ], id: 'colortool'
        },
        {
          name: '正则表达式', links: [
            { name: '正则表达式-站长工具', url: 'http://tool.chinaz.com/regex/' },
            { name: '正则可视化', url: 'https://jex.im/regulex' },
          ],
          id: 'regex'
        },
        {
          name: '娱乐', links: [
            { name: '斗鱼TV', url: 'https://www.douyu.com' },
            { name: '虎牙TV', url: 'https://www.huya.com' },
            { name: '战旗TV', url: 'https://www.zhanqi.tv' },
            { name: '哔哩哔哩', url: 'https://www.bilibili.com/' },
            { name: '超级小桀', url: 'https://www.douyu.com/74751' },
            { name: '风行云', url: 'https://www.huya.com/668668' },
            { name: '文森特', url: 'https://www.huya.com/949527' },
            { name: 'TESTV', url: 'https://space.bilibili.com/11336264/video' },
            { name: '哔哩哔哩英雄联盟赛事', url: 'https://space.bilibili.com/50329118/video' },
            { name: '托马斯', url: 'https://www.huya.com/thomasczh' },
          ],
          id: 'yule'
        },
        {
          name: '电影', links: [
            { name: 'cupfox', url: 'https://www.cupfox.com' },
          ],
          id: 'movie'
        },
        {
          name: '工具', links: [
            { name: '在线进制转换', url: 'https://lostphp.com/hexconvert/' },
          ],
          id: 'tool'
        },
      ]
    };

    var menu = [];
    (data_json.url_fenlei).map(item => {
      if (Array.isArray(item.links) && item.links.length > 0) {
        menu.push({
          name: item.name,
          id: item.id
        })
      }
    });



    console.log(menu);
    var nav = document.getElementById('nav')
    var section = document.getElementById('section')

 

    var aside = document.getElementById('aside');
    aside.addEventListener('click', function (e) {
      const acho = e.target.getAttribute('id')
      if (acho !== 'aside') {
        var a = document.getElementById(acho.split('#')[1])
        window.scrollTo({
          top: a.offsetTop,
          behavior: 'smooth'
        })
      }

    })
    console.log(aside);
    for (var i = 0; i < menu.length; i++) {
      const ra = classes[Math.round(Math.random() * 5)];
      var a = $(`<a class="items" id="#${menu[i].id}">`)
        .attr('href', menu[i].target)
        .text(menu[i].name).appendTo(aside)
    }


    // [2] 创建链接的按钮
    CreateButtons(data_json.url_main, nav);
    CreateButtons2(data_json.url_fenlei, section);
  </script>
</body>

</html>